/*
 * 全时云商务服务股份有限公司.
 * Copyright © 2021 京icp备08005473号. All rights reserved.
 * @Date: 2021-09-03.
 * @Author：
 * @Description 小课堂 - 选择上课时间
 **/
import React, { memo, useState } from "react"
import {  AtCalendar, AtButton } from 'taro-ui'
import classNames from 'classnames'
import { View, Text, Image } from '@tarojs/components'
import './index.scss'

interface Props {
  detailUrl: string // 详情页地址
  id?: string // 设置项的 key值
  label?: string // label
}
interface timeType {
  id: number
  time: string
  checked: boolean
}
/**
 *@Description
 *@Return  课程 - 上课时间选择.
 **/
const ClassTime: React.FC<Props> = props => {
   console.log("props--CourseDetail----------", props)
   const [checkedNum, setCheckedNum] = useState(0) // 选择课程时间 数量
   const [timeList, setTimeList] = useState([{
     id: 1,
     checked: true,
     time: "08:00-09:00",
   }, {
    id: 2,
    checked: true,
    time: "09:00-10:00",
  }, {
    id: 3,
    checked: false,
    time: "10:00-11:00",
  }, {
    id: 4,
    checked: true,
    time: "11:00-12:00",
   }])

   /**
   *@Description
   *@Return  上课时间 按钮 选择.
  **/
   const handleTimeClick = (val) => {
     console.log("val--------", val)
      const checkedArr: Array<timeType> = []
      const arr = timeList.map(item => {
       if(item.id === val.id) {
        item.checked = !val.checked
       }
       if(item.checked){
        checkedArr.push(item)
       }
       return item
     })

     setTimeList(arr)
     setCheckedNum(checkedArr.length)

   }
  /**
   *@Description
   *@Return  上课时间 确定按钮.
  **/
   const handleClassTimeClick = () => {

   }

   return (
    <View>
      {/* 头像 */}
      <View className='cou-avatar'>
        <Image src='https://tse3-mm.cn.bing.net/th/id/OIP-C.7n9maUPX84tlG0VV-vHQFAHaEo?pid=ImgDet&rs=1'></Image>
        <View className='cou-btn-avatar btn50 btn-origin'>1对1</View>
      </View>

      {/* 班级名称 */}
      <View className='cou-class-name canter'>
        学习能力提升的训练班
        <View className='class-time'>8月1日-8月15日 <Text>30课时</Text></View>
      </View>

      <View className='p1f30'>
        {/*  日历 */}
        <View className='mt40 mb40'>
          <AtCalendar currentDate='2021/09/03' />
        </View>
        {/* 时间按钮 */}
        <View className='btn-list-time'>
          {
            timeList.map((val) => {
              return (
                <View className={classNames("btn64", val.checked ? "btn-green border-green" : "btn-white border-gray")} key={val.id} onClick={() => handleTimeClick(val)}> { val.time } </View>
              )
            })
          }
        </View>

        {/* 确定按钮 */}
        <View className='cou-sign-up'>
          <AtButton circle type='primary' size='normal' onClick={handleClassTimeClick}>确定（{checkedNum}/{timeList.length}）</AtButton>
        </View>
      </View>

    </View>
   )
 }

export default memo(ClassTime)

